<template>
  <div class="container">
    <h1>hi {{name}} {{age}}</h1>
    <button @click=updateName()>updateName</button>
  </div>
</template>

<script>
import { onBeforeMount, onMounted, reactive, toRefs, ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // const obj = reactive ({
    //   name: 'jack',
    //   age: 18
    // })

    // const obj2 = toRefs (obj)
    // const updateName = () => {
    //   obj.name = 'tom'
    //   obj.age = 29
    // }
    // return {...obj2, updateName}

    const name = ref ('jim')
    const age = ref (18)

    const updateName = () => {
      name.value = 'jerry'
      age.value = 29
    }
    return {name, age, updateName}

    onBeforeMount (() => {
      console.log ('DOM渲染前',document.querySelector('.container'))
    })

    onMounted(()=>{
      console.log('DOM渲染后1',document.querySelector('.container'))
    })

    onMounted(()=>{
      console.log('DOM渲染后2',document.querySelector('.container'))
    })
  }
}
</script>
